import { Input, Button, Space, Avatar, Typography, Skeleton } from "antd";
const { Title, Paragraph, Text, Link } = Typography;
import React from "react";
import { useState } from "react";
import styles from './index.module.less'
import http from "@/http";

export default class Home extends React.Component {
    ref: any = null;
    state: any = {
        list: [{
            type: 'gpt',
            content: '你好，我是gpt，请问有什么可以帮助你的嘛？'
        }],
        question: '',
        wait: false
    }
    constructor(props: any) {
        super(props);
    }

    query = () => {
        const { list, question } = this.state;
        this.setState({
            list: [...list,
                {
                    type: 'question',
                    content: question,
                },
                {
                    type: 'gpt',
                    content: null,
                }
            ],
            // question: ''
        }, () => {
            this.flash();
            fetch(`http://192.168.0.100:3000/chatgpt?question=${question}`)
            .then(response => response.json())
            .then(data => {
                const { list } = this.state;
                list.forEach((item: any) => {
                    if (!item.content) {
                        item.content = data.data.text;
                    }
                })
                this.setState({
                    list: list
                }, () => {
                    this.flash();
                });
            });
        });
    }

    flash = () => {
        const scrollDiv: any = document.getElementById('scrollDiv');
        scrollDiv.scrollTop = scrollDiv.scrollHeight;
    }

    render() {
        const { question, list } = this.state;
        return (
            <div className={styles.container}>
                <div ref={this.ref} id='scrollDiv' className={styles.content}>{
                    list.map((item: any, index: any) => {
                        if (item.type == 'gpt') {
                            return <div key={index} className={styles.gptItem}>
                                <div><Avatar style={
                                    {
                                        backgroundColor: '#f56a00',
                                        marginRight: 8,
                                        display: 'inline-block',
                                    }}>gpt</Avatar>&nbsp;&nbsp;</div>
                                    {
                                        !item.content ? 
                                        <Skeleton />
                                        : 
                                        (
                                            <Paragraph>
                                                <pre style={{ margin: 0, textAlign: 'left' }}>{item.content}</pre>
                                            </Paragraph>
                                        )
                                    }
                            </div>
                        }
                        return <div key={index} className={styles.questionItem}>
                            <Paragraph>
                                <pre style={{ margin: 0, textAlign: 'left' }}>{item.content}</pre>
                            </Paragraph>
                            <div><Avatar style={
                                {
                                    backgroundColor: '#f56a00',
                                    display: 'inline-block',
                                    marginLeft: 8
                                }
                            }>用户</Avatar>&nbsp;&nbsp;</div>
                        </div>
                    })
                }</div>
                <div className={styles.userContent}>
                    <Input.TextArea
                        value={question}
                        onChange={(e: any) => {
                            this.setState({
                                question: e.target.value
                            })
                        }}
                        onPressEnter={this.query}
                        style={{ display: 'flex', flex: 1, marginRight: 8, minHeight: 60 }}
                    ></Input.TextArea>
                    <Button onClick={this.query}>搜索</Button>
                </div>
            </div>
        )
    }
}